<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示</title>
	<link rel="stylesheet" href="/public/static/index/layui/css/layui.css">
	<style>
		li, h6 {
			padding: 5px 0;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="layui-container">
		<ul>
			{foreach $users as $key => $obj}
	        <li class="layui-bg-red">{$obj.id} -- {$obj.name}</li>
		    {/foreach}
		</ul>

	    <h2 class="layui-bg-orange">下标key从0开始，遍历对象放到obj</h2>
	    {foreach name='users' item='obj' key='k'}
	    <h6 class="layui-bg-green">{$k}: {$obj.id} -- {$obj.name}</h6>
	    {/foreach}

	    <h2 class="layui-bg-orange">key加100</h2>
	    {volist name='users' id = 'obj' key='k'}
	    <h6 class="layui-bg-blue">{$k + 100}: {$obj.id} -- {$obj.name}</h6>
	    {/volist}

	    <h2 class="layui-bg-orange">使用 offset和 length 属性，从第 4 条开始显示5条数据</h2>
	    <h2 class="layui-bg-orange">这里下标offset从 0 开始</h2>
	    {volist name="users" id="obj" offset='3' length='5'}
	        <h6 class="layui-bg-blue">{$k}: {$obj.id} -- {$obj.name}</h6>
	    {/volist}

	    <ol>
	        <li>可以使用 eq 标签来实现奇数或偶数的筛选数据</li>
	        <li>mod=2 表示索引除以 2，得到的余数等于 0 或 1</li>
	        <li>如果余数value设置为 0，那么输出的即偶数，如果设置为 1，则输出的是奇数</li>
	        <li>当然，切换到其它数字，也会有更多的排列效果</li>
	    </ol>
	    {volist name="users" id="obj" mod="2" key="k"}
	        {eq name='mod' value='0'}
	            <h6 class="layui-bg-green">{$k}: {$obj.id} -- {$obj.name}</h6>
	        {/eq}
	        {eq name='mod' value='1'}
	            <h6 class="layui-bg-red">{$k}: {$obj.id} -- {$obj.name}</h6>
	        {/eq}
	    {/volist}
	    <div>
	        8. 使用 empty 属性，可以当没有任何数据的时候，实现输出指定的提示；
	    </div>
	    {volist name="users" id="obj" empty="没有数据"}
	        
	    {/volist}
	</div>
	
</body>
</html>